// 顶部导航菜单
<template>
  <el-row class="nav-member">
    <el-row class="header">
      <el-row style="width:1150px;">
        <el-col :span="5">
          <div class="logo">{{this.$store.getters.memberGameAccount.banker}}</div>
        </el-col>
        <el-col :span="10">
          <el-row class="menu1" type="flex" justify="center" align="middle">
            <template v-if="gamePeriodBalls">
              <el-col :span="8" class="draw-number">
                <!--对应游戏名称-->
                <el-row> {{memberGames[memberGameSelected]}}</el-row>
                <!--对应游戏开奖期数-->
                <el-row> {{gamePeriodBalls.prePeriod}}期开奖</el-row>
              </el-col>
              <el-col :span="16" :class="{
                  T_PK10:memberGameSelected==='bjpk10'||memberGameSelected==='azlucky10'||memberGameSelected
                  ==='amsc'||memberGameSelected==='hlsc'||memberGameSelected==='hljssc'||memberGameSelected==='jsft'
                  ||memberGameSelected==='amjssc'||memberGameSelected==='xyft'||memberGameSelected==='jssc',
                  T_KL8:memberGameSelected==='bjkl8'||memberGameSelected==='azlucky20',
                  T_SSC:memberGameSelected==='azlucky5'||memberGameSelected==='jsssc'||memberGameSelected
                  ==='xjssc'
                  ||memberGameSelected==='tjssc'||memberGameSelected==='hlssc'||memberGameSelected==='hljsssc'||
                  memberGameSelected==='amssc'||memberGameSelected==='amjsssc',
                  L_CQHLSX:memberGameSelected==='cqssc',
                  T_KLSF:memberGameSelected==='gdklsf'||memberGameSelected==='azlucky8',XYNCTerm:memberGameSelected==='cqxync',
                  T_K3:memberGameSelected==='gxk3',T_11X5:memberGameSelected==='gd115',T_GXKLSF:memberGameSelected==='gxklsf',
                }">
                <div v-if="memberGameSelected==='pcegg'">
                  <span :class="'pc28_ball_grey_'+ gamePeriodBalls.preBallNums.substring(0,1)"></span><span style="margin: 7px 9px 0 9px">+</span>
                  <span :class="'pc28_ball_grey_'+ gamePeriodBalls.preBallNums.substring(2,3)"></span><span style="margin: 7px 9px 0 9px">+</span>
                  <span :class="'pc28_ball_grey_'+ gamePeriodBalls.preBallNums.substring(4,5)"></span><span style="margin: 7px 9px 0 9px">=</span>
                  <span :class="'pc28_ball_'+ (gamePeriodBalls.preBallNums.substring(0,1)*1+gamePeriodBalls.preBallNums.substring(2,3)*1+
                gamePeriodBalls.preBallNums.substring(4,5)*1)"></span>
                </div>
                <b v-if="gamePeriodBalls.preBallNums"
                   v-for="(item,index) in gamePeriodBalls.preBallNums.split(',')" :key="index" class="bb"
                   :class="`b${item}`"></b>
              </el-col>
            </template>
            <template v-else>
              <el-col :span="23" class="draw-number">
                <span style="width:200px">未有开奖信息</span>
              </el-col>
            </template>
            <el-col :span="1">
              <!-- <div>声音</div> -->
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="7">
          <el-row class="menu-link">
            <el-row style="margin-top:10px;">
              <el-col :span="6">
                <router-link to="/member/raw">未结明细</router-link>
              </el-col>
              <el-col :span="6">
                <router-link to="/member/balanced">今日已结</router-link>
              </el-col>
              <el-col :span="6">
                <router-link :to="{name: 'member_history', params:{type: 0, date:{}}}">两周报表</router-link>
              </el-col>
              <el-col :span="6">
                <router-link :to="{name:'member_jiang', query:{date: parseInt(Date.now())}}">开奖结果</router-link>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <router-link to="/member/profile">个人资讯</router-link>
              </el-col>
              <el-col :span="6">
                <router-link to="/member/changepwd">修改密码</router-link>
              </el-col>
              <el-col :span="6">
                <router-link to="/member/rule">游戏规则</router-link>
              </el-col>
              <el-col :span="6">
                <span id="skinPanel">
                  <ul>
                    <li class="skin_red">
                    <i style="background:#dc2f39">
                      <a @click="changeSkin('skin_red')" href="javascript:void(0)"></a>
                    </i>
                  </li>
                    <li class="skin_blue">
                      <i style="background:#5382bc">
                        <a @click="changeSkin('skin_blue', $event)" href="javascript:void(0)">
                        </a>
                      </i>
                    </li>
                    <li class="skin_orange">
                      <i style="background: #d45000">
                        <a @click="changeSkin('skin_orange')" href="javascript:void(0)">
                        </a>
                      </i>
                    </li>
                    <li class="skin_green">
                    <i style="background:#61a000">
                    <a @click="changeSkin('skin_green')" href="javascript:void(0)">
                  </a>
                  </i>
                  </li>
                  </ul>
                </span>
              </el-col>
            </el-row>
          </el-row>
        </el-col>
        <el-col :span="2">
          <el-row class="bet-list">
            <div class="logout" @click="logout"><img src="/static/member/images/logout-icon.png" alt="">退出</div>
          </el-row>
        </el-col>
      </el-row>
    </el-row>
    <!--头部导航栏-->
    <el-row class="tabs">
      <el-row style="width:1200px;min-height: 40px">
        <el-col style="width: 117px;" v-for="(item,index) in navgamesall" :key="index">
          <el-row v-if="index <8 " class="item">
            <div @click="handleTabClick(item.key,item.value,index)"
                 :class="memberGameSelected == item.key && 'current'">{{item.value}}
            </div>
          </el-row>
        </el-col>
        <div @mouseenter="enter" @click="enter" @mouseleave="leave" style="display: inline-block">
          <div class="item"
               v-if="navgamesall.length>7"
               :class="memberGameSelected == gengduokey && 'current'"
               style="width: 117px;height: 40px;line-height: 40px;display: inline-block;text-align: center">
            {{gengduo}}
            <span v-if="memberGameSelected !== gengduokey" class="el-icon-caret-bottom"></span>
          </div>
          <div class="bet-list">
            <div class="selecttk" v-if="navfalse" style="width: 117px;position:absolute;z-index: 100;right:147px">
              <el-col style="width: 117px" v-for="(item,index) in navgamesall" :key="`navgamesall${index}`">
                <el-row v-if="index > 7" class="item itemsa">
                  <div @click="handleTabClick(item.key,item.value,index)">{{item.value}}</div>
                </el-row>
              </el-col>
            </div>
          </div>

        </div>
        <div @click="setupclick" class="item"
             style="width: 90px;height: 40px;line-height: 40px;display: inline-block;text-align: center;position: absolute;right: 40px">
          <img style="vertical-align:middle;margin-right: 3px" src="/static/member/images/setting.png" alt="">设置
        </div>
        <div v-if="faletk"
             style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.3);z-index: 500;overflow-y: auto">

          <div class="bet-list faletkGames">
            <div v-show="faletk" class="xiansicz">
              <div class="xiansicztop" style="height: 25px;padding: 0 2px;">
                <span style="line-height: 25px;font-size: 14px">选择显示彩种</span>
                <span style="float: right;line-height: 25px;font-size: 14px" class="el-icon-close"
                      @click="closeclick"></span>
                <div style="clear: both"></div>
              </div>
              <div style="padding: 20px 0 20px 55px">
                <ul v-if="faletk" id="sortable">
                  <li style="height: 20px" v-for="(item,index) in cggamesall" :key="`memberGames${index}`" :myvalue="item.key">
                    <input type="checkbox" v-model="item.checked">
                    <span style="color: #000000">{{item.value}}</span>
                  </li>
                </ul>
              </div>
              <p style="color: red;padding: 0 0 20px 10px">注：可拖动彩种位置来改变彩种排序。</p>
              <div class="xiansiczbottom" style="height: 36px;line-height:36px;text-align: center">
        <span
          @click="determine"
          class="xiansiczanniu" style="display: inline-block;width: 64px;height: 20px;line-height:20px;text-align:center;color: #fff;cursor: pointer">
          确定
        </span>
                <span
                  @click="cancel"
                  class="xiansiczanniu" style="display: inline-block;width: 64px;height: 20px;line-height:20px;text-align:center;color: #fff;cursor: pointer">
          取消
        </span>
              </div>
            </div>
          </div>
        </div>
      </el-row>

    </el-row>
    <!--头部二级导航栏-->
    <el-row v-if="memberPages" class="subtabs">
      <el-button class="btn" v-for="(child,indexChild) in memberPages" :key="`memberPages${indexChild}`"
                 :class="memberPageSelected == indexChild && 'btn-active'" size="mini"
                 @click="handleTabChildClick(indexChild)">{{child}}
      </el-button>
    </el-row>
  </el-row>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { dttaLottery } from '@/utils/colorvariety' // 参数映射
  import $ from 'jquery'
  // 需要注意的是，jquery-ui引入的时候，
  // 直接写 import juqery-ui 没有效果，只能直接写到具体的方法
  // 好处是需要引用的也只有两个  draggable  droppable

  import 'jquery-ui/ui/widgets/sortable'
  import 'jquery-ui/ui/widgets/resizable'

  let interval = null
  let sim = null
  let timer = null;
  export default {
    name: 'MemberNavHeader',
    data() {
      return {
        iiiIndex: 0,
        game: '0',
        page: '0',
        none: false,
        gsus: 'lm',
        navlength: true,
        navlengths: false,
        gengduo: '更多游戏',
        gengduokey: '',
        navfalse: false,
        xscheckbox: true,
        cggamesall: [],
        navgamesall: [],
        pushxz: [],
        faletk: false,
      }
    },
    components: {},
    computed: {
      ...mapGetters([
        'memberGames', // 获取可投注彩种
        'gamesall', // 获取所有彩种
        'memberPages',
        'memberLottery',
        'gamePeriodBalls',
        'memberGameSelected',
        'memberPageSelected',
        'memberLastResult',
        'memberLastOrder',
        'memberGamePeriod',
      ]),
    },
    async created() {
      // await this.$store.dispatch('MemberGames', {})
      if (this.memberGameSelected) {
        this.game = this.memberGameSelected
      } else {
        if (this.memberGames) {
          this.game = Object.keys(this.memberGames)[0]
        } else {
          this.$store.dispatch('MemberGames', {})
            .then(() => {
              this.game = Object.keys(this.memberGames)[0]
            })
        }
        this.$store.commit('MEMBER_SELECT_GAME', this.game)

      }
      this.restructuregamesall()
      this.page = this.memberPageSelected
      const tempGame = JSON.parse(JSON.stringify(this.cggamesall))
      this.sortArray(tempGame, JSON.parse(localStorage.nav))

    },
    mounted() {
      const pageSkin = localStorage.getItem('skin')
      const parentEl = $('#skinPanel').children('ul')
      const elLi = parentEl.children()
      for (let i = 0; i < elLi.length; i++) {
        elLi[i].classList.remove('active')
      }
      for (let i = 0; i < elLi.length; i++) {
        if (elLi[i].getAttribute('class') === pageSkin) {
          elLi[i].classList.add('active')
        }
      }
    },
    methods: {
      getMemberLastResult(){
        let self = this;
        this.$store.dispatch('MemberLastResult', {
          game: this.game,
        }).then(data => {

        }).catch(err => {
          console.log(err)
        }).finally(() => {
          if(timer){
            clearTimeout(timer);
            timer = null;
          }
          timer = setTimeout(function () {
            self.getMemberLastResult();
          },10000)
        })
      },
      // 换肤
      changeSkin(value) {
        const parentEl = $('#skinPanel').children('ul')
        const elLi = parentEl.children()
        for (let i = 0; i < elLi.length; i++) {
          elLi[i].classList.remove('active')
        }
        for (let i = 0; i < elLi.length; i++) {
          if (elLi[i].getAttribute('class') === value) {
            elLi[i].classList.add('active')
          }
        }
        this.$store.commit('SET_SKIN', value) // 换肤
        localStorage.setItem('skin', value)
      },
      sortArray(value, sessionValue) {
        this.cggamesall.splice(0)
        const selectedLottery = []
        const notSelectedLottery = []

        for (const index in value) {
          let tempI = 0
          for (const key in sessionValue) {
            if (sessionValue[key].key === value[index].key) {
              tempI++
              selectedLottery.push(value[index])
            }
          }
          if (tempI === 0) {
            notSelectedLottery.push(value[index])
          }
        }
        for (const key in selectedLottery){
          this.cggamesall.push(selectedLottery[key])
        }
        for (const key in notSelectedLottery){
          this.cggamesall.push(notSelectedLottery[key])
        }
      },
      // 设置
      setupclick() {
        if (!localStorage.tkang) {
          const tempGame = JSON.parse(JSON.stringify(this.cggamesall))
          this.sortArray(tempGame, JSON.parse(localStorage.nav))
        }
        this.faletk = true
        this.iiiIndex++
        $(function() {
          $("#sortable").sortable()
          $("#sortable").disableSelection()
        })
      },
      // 关闭
      closeclick() {
        this.faletk = false
      },
      // 重构
      restructuregamesall() {
        let localTKang = ''
        let localTkangTemp = []
        if (localStorage.tkang) {
          localTKang = JSON.parse(localStorage.tkang)
          localTkangTemp = JSON.parse(localStorage.tkang)
          const tempTKang = this.memberGames
          const arr = []
          const arrTKang = []
          console.log(localTKang)
          console.log(tempTKang)

          localTKang.map((item) => {
            arr.push(item.key)
          })
          for (const key in tempTKang) {
            arrTKang.push(key)
          }
          for (const key in localTKang) {
            if (arrTKang.indexOf(localTKang[key].key) <= -1) {
              localTkangTemp.splice(key, 1)
            }
          }
          for (const key in this.memberGames) {
            if (arr.indexOf(key) <= -1) {
              const tempGames = {
                key: key,
                value: this.memberGames[key],
                checked: true,
              }
              localTkangTemp.push(tempGames)
            }
          }
        } else {
          for (const key in this.memberGames) {
            const tempGames = {
              key: key,
              value: this.memberGames[key],
              checked: true,
            }
            localTkangTemp.push(tempGames)
          }
        }

        localStorage.tkang = JSON.stringify(localTkangTemp)
        this.cggamesall = JSON.parse(localStorage.tkang)

        if (localStorage.nav) {
          this.navgamesall = JSON.parse(localStorage.nav)
        } else {
          for (var i = 0; i < this.cggamesall.length; i++) {
            if (this.cggamesall[i].checked) {
              this.pushxz.push(this.cggamesall[i])
              localStorage.nav = JSON.stringify(this.pushxz)
              this.navgamesall = JSON.parse(localStorage.nav)
            }
          }
        }
      },
      // 确定
      determine() {
        const bb = []
        const els = $('#sortable').children()
        for (const key in els) {
          if (!isNaN(key)) {
            bb.push(els[key].getAttribute('myvalue'))
          }
        }
        const sortArray = []
        const sortArraya = []
        for (const key in bb) {
          for (const index in this.cggamesall) {
            if (bb[key] === this.cggamesall[index].key) {
              if (this.cggamesall[index].checked === true) {
                sortArray.push(this.cggamesall[index])
              }
              if (this.cggamesall[index].checked === false) {
                sortArraya.push(this.cggamesall[index])
              }
            }
          }
        }
        this.cggamesall.splice(0)
        for (const key in sortArray) {
          this.cggamesall.push(sortArray[key])
        }
        for (const key in sortArraya) {
          this.cggamesall.push(sortArraya[key])
        }
        localStorage.tkang = JSON.stringify(this.cggamesall)

        this.pushxz = []
        var type = true;
        for (var i = 0; i < this.cggamesall.length; i++) {
          if (this.cggamesall[i].checked) {
            type = false;
            this.pushxz.push(this.cggamesall[i])
            localStorage.nav = JSON.stringify(this.pushxz)
            this.navgamesall = JSON.parse(localStorage.nav)
          }
        }
        if (type) {
          for (var i = 0; i < this.cggamesall.length; i++) {
            this.pushxz.push(this.cggamesall[i])
            localStorage.nav = JSON.stringify(this.pushxz)
            this.navgamesall = JSON.parse(localStorage.nav)
          }
        }
        this.restructuregamesall()
        this.faletk = false
      },
      // 取消
      cancel() {
        this.faletk = false
      },
      // 鼠标移入移出
      enter() {
        this.navfalse = true
        document.documentElement.style.overflowY = 'auto'
      },
      leave() {
        this.navfalse = false
        document.documentElement.style.overflowY = 'hidden'
        document.documentElement.scrollTop = 0
        document.body.scrollTop = 0
      },
      async handleTabClick(gameIndex, label = '', index) {
        setTimeout(() => {
          this.leave()
        }, 50)
        this.$store.commit('MEMBER_SET_GAMEPERIODBALLS') // 将顶部游戏期数置空
        if (index > 7) {
          this.navfalse = false
          this.gengduo = label
          this.gengduokey = gameIndex
        } else {
          this.gengduo = '更多游戏'
          this.gengduokey = ''
        }
        // _this.memberLastResult.lastResult.numbers = ''
        if (label === '设置') {
          this.$router.push('/option')
        } else {
          this.game = gameIndex
          this.game === this.memberGameSelected || this.$store.commit('MEMBER_SELECT_GAME', this.game)
          this.page = this.memberPageSelected
          this.$router.push('/member/list')
          this.$store.commit('MEMBER_SELECT_GAME', this.game)
        }
        this.$store.dispatch('MemberGamePeriod', {}) // 获取游戏期数信息
        // 导航切换同时获取投注页面选项
        if (gameIndex === 'bjpk10' || gameIndex === 'jsft' || gameIndex === 'jssc' || gameIndex === 'xyft' || gameIndex === 'hljssc'
          || gameIndex === 'hlsc' || gameIndex === 'amsc' || gameIndex === 'amjssc' || gameIndex === 'azlucky10') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.bjpk10.lm)
          this.page = 'lm'
        }
        if (gameIndex === 'azlucky20' || gameIndex === 'bjkl8') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.azlucky20.all)
          this.page = 'all'
        }
        if (gameIndex === 'jsssc' || gameIndex === 'tjssc' || gameIndex === 'xjssc' || gameIndex === 'cqssc' || gameIndex === 'hljsssc'
          || gameIndex === 'hlssc' || gameIndex === 'amssc' || gameIndex === 'amjsssc' || gameIndex === 'azlucky5') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.cqssc.lm)
          this.page = 'lm'
        }
        if (gameIndex === 'azlucky8' || gameIndex === 'gdklsf' || gameIndex === 'cqxync') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.gdklsf.zh)
          this.page = 'zh'
        }
        if (gameIndex === 'gxklsf') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.gxklsf['15'])
          this.page = '15'
        }
        if (gameIndex === 'gd115') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.gd115.lm)
          this.page = 'lm'
        }
        if (gameIndex === 'pcegg') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.pcegg.lm)
          this.page = 'lm'
        }
        if (gameIndex === 'gxk3') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.gxk3.all)
          this.page = 'all'
        }
        this.$store.commit('MEMBER_SELECT_PAGE', this.page)
        // 导航切换同时获取赔率
        await this.$store.dispatch('MemberOrdersOdds', {
          game: this.game,
          page: this.page,
          _: parseInt(Date.now() / 1000),
        })
      },
      async handleTabChildClick(indexChild) {
        this.gsus = indexChild
        this.page = indexChild
        console.log('000000000000', this.memberGameSelected)
        this.page === this.memberPageSelected ||
        this.$store.commit('MEMBER_SELECT_PAGE', this.page)
        this.$router.push('/member/list')
        var yjnav = this.memberGameSelected
        // 北京快乐8 澳洲幸运20
        this.selectedSubNav(yjnav, indexChild)
      },
      selectedSubNav(yjnav, indexChild) {
        if ((yjnav === 'bjkl8' || yjnav === 'azlucky20') && indexChild === 'all') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.azlucky20.all)
        }
        if ((yjnav === 'bjkl8' || yjnav === 'azlucky20') && indexChild === 'zm') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.azlucky20.zm)
        }
        // 北京pk10 极速赛车 幸运飞艇 America赛车 极速飞艇 America极速赛车 澳洲幸运10
        if ((yjnav === 'bjpk10' || yjnav === 'hljssc' || yjnav === 'hlsc' || yjnav === 'jssc' || yjnav === 'jssc' || yjnav === 'xyft' || yjnav === 'amsc' || yjnav === 'jsft' ||
          yjnav === 'amjssc' || yjnav === 'azlucky10') && indexChild === 'lm') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.bjpk10.lm)
        }
        if ((yjnav === 'bjpk10' || yjnav === 'hljssc' || yjnav === 'hlsc' || yjnav === 'jssc' || yjnav === 'jssc' || yjnav === 'xyft' || yjnav === 'amsc' || yjnav === 'jsft' ||
          yjnav === 'amjssc' || yjnav === 'azlucky10') && indexChild === 'zd') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.bjpk10.zd)
        }
        if ((yjnav === 'bjpk10' || yjnav === 'hljssc' || yjnav === 'hlsc' || yjnav === 'jssc' || yjnav === 'jssc' || yjnav === 'xyft' || yjnav === 'amsc' || yjnav === 'jsft' ||
          yjnav === 'amjssc' || yjnav === 'azlucky10') && indexChild === 'gyh') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.bjpk10.gyh)
        }
        // 时时彩
        if ((yjnav === 'cqssc' || yjnav === 'hljsssc' || yjnav === 'hlssc' || yjnav === 'jsssc' || yjnav === 'tjssc' || yjnav === 'xjssc' || yjnav === 'amjsssc' || yjnav === 'amssc' ||
          yjnav === 'azlucky5') && indexChild === 'lm') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.cqssc.lm)
        }
        if ((yjnav === 'cqssc' || yjnav === 'hljsssc' || yjnav === 'hlssc' || yjnav === 'jsssc' || yjnav === 'tjssc' || yjnav === 'xjssc' || yjnav === 'amjsssc' || yjnav === 'amssc' ||
          yjnav === 'azlucky5') && indexChild === 'zd') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.cqssc.zd)
        }
        if ((yjnav === 'cqssc' || yjnav === 'hljsssc' || yjnav === 'hlssc' || yjnav === 'jsssc' || yjnav === 'tjssc' || yjnav === 'xjssc' || yjnav === 'amjsssc' || yjnav === 'amssc' ||
          yjnav === 'azlucky5') && indexChild === 'yzzh') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.cqssc.yzzh)
        }
        if ((yjnav === 'cqssc' || yjnav === 'hljsssc' || yjnav === 'hlssc' || yjnav === 'jsssc' || yjnav === 'tjssc' || yjnav === 'xjssc' || yjnav === 'amjsssc' || yjnav === 'amssc' ||
          yjnav === 'azlucky5') && indexChild === 'ezzh') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.cqssc.ezzh)
        }
        if ((yjnav === 'cqssc' || yjnav === 'hljsssc' || yjnav === 'hlssc' || yjnav === 'jsssc' || yjnav === 'tjssc' || yjnav === 'xjssc' || yjnav === 'amjsssc' || yjnav === 'amssc' ||
          yjnav === 'azlucky5') && indexChild === 'szzh') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.cqssc.szzh)
        }
        if ((yjnav === 'cqssc' || yjnav === 'hljsssc' || yjnav === 'hlssc' || yjnav === 'jsssc' || yjnav === 'tjssc' || yjnav === 'xjssc' || yjnav === 'amjsssc' || yjnav === 'amssc' ||
          yjnav === 'azlucky5') && indexChild === 'ezdw') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.cqssc.ezdw)
        }
        if ((yjnav === 'cqssc' || yjnav === 'hljsssc' || yjnav === 'hlssc' || yjnav === 'jsssc' || yjnav === 'tjssc' || yjnav === 'xjssc' || yjnav === 'amjsssc' || yjnav === 'amssc' ||
          yjnav === 'azlucky5') && indexChild === 'szdw') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.cqssc.szdw)
        }
        if ((yjnav === 'cqssc' || yjnav === 'hljsssc' || yjnav === 'hlssc' || yjnav === 'jsssc' || yjnav === 'tjssc' || yjnav === 'xjssc' || yjnav === 'amjsssc' || yjnav === 'amssc' ||
          yjnav === 'azlucky5') && indexChild === 'ezhs') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.cqssc.ezhs)
        }
        if ((yjnav === 'cqssc' || yjnav === 'hljsssc' || yjnav === 'hlssc' || yjnav === 'jsssc' || yjnav === 'tjssc' || yjnav === 'xjssc' || yjnav === 'amjsssc' || yjnav === 'amssc' ||
          yjnav === 'azlucky5') && indexChild === 'szhs') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.cqssc.szhs)
        }
        if ((yjnav === 'cqssc' || yjnav === 'hljsssc' || yjnav === 'hlssc' || yjnav === 'jsssc' || yjnav === 'tjssc' || yjnav === 'xjssc' || yjnav === 'amjsssc' || yjnav === 'amssc' ||
          yjnav === 'azlucky5') && indexChild === 'zxs') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.cqssc.zxs)
        }
        if ((yjnav === 'cqssc' || yjnav === 'hljsssc' || yjnav === 'hlssc' || yjnav === 'jsssc' || yjnav === 'tjssc' || yjnav === 'xjssc' || yjnav === 'amjsssc' || yjnav === 'amssc' ||
          yjnav === 'azlucky5') && indexChild === 'zxl') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.cqssc.zxl)
        }
        if ((yjnav === 'cqssc' || yjnav === 'hljsssc' || yjnav === 'hlssc' || yjnav === 'jsssc' || yjnav === 'tjssc' || yjnav === 'xjssc' || yjnav === 'amjsssc' || yjnav === 'amssc' ||
          yjnav === 'azlucky5') && indexChild === 'fszh') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.cqssc.fszh)
        }
        if ((yjnav === 'cqssc' || yjnav === 'hljsssc' || yjnav === 'hlssc' || yjnav === 'jsssc' || yjnav === 'tjssc' || yjnav === 'xjssc' || yjnav === 'amjsssc' || yjnav === 'amssc' ||
          yjnav === 'azlucky5') && indexChild === 'kd') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.cqssc.kd)
        }

        // 广东快乐十分 重庆幸运农场
        if ((yjnav === 'gdklsf' || yjnav === 'cqxync' || yjnav === 'azlucky8') && indexChild === 'zh') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.gdklsf.zh)
        }
        if ((yjnav === 'gdklsf' || yjnav === 'cqxync' || yjnav === 'azlucky8') && indexChild === 'zd') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.gdklsf.zd)
        }
        if ((yjnav === 'gdklsf' || yjnav === 'cqxync' || yjnav === 'azlucky8') && indexChild === 'ball1') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.gdklsf.ball1)
        }
        if ((yjnav === 'gdklsf' || yjnav === 'cqxync' || yjnav === 'azlucky8') && indexChild === 'ball2') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.gdklsf.ball2)
        }
        if ((yjnav === 'gdklsf' || yjnav === 'cqxync' || yjnav === 'azlucky8') && indexChild === 'ball3') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.gdklsf.ball3)
        }
        if ((yjnav === 'gdklsf' || yjnav === 'cqxync' || yjnav === 'azlucky8') && indexChild === 'ball4') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.gdklsf.ball4)
        }
        if ((yjnav === 'gdklsf' || yjnav === 'cqxync' || yjnav === 'azlucky8') && indexChild === 'ball5') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.gdklsf.ball5)
        }
        if ((yjnav === 'gdklsf' || yjnav === 'cqxync' || yjnav === 'azlucky8') && indexChild === 'ball6') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.gdklsf.ball6)
        }
        if ((yjnav === 'gdklsf' || yjnav === 'cqxync' || yjnav === 'azlucky8') && indexChild === 'ball7') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.gdklsf.ball7)
        }
        if ((yjnav === 'gdklsf' || yjnav === 'cqxync' || yjnav === 'azlucky8') && indexChild === 'ball8') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.gdklsf.ball8)
        }
        if ((yjnav === 'gdklsf' || yjnav === 'cqxync' || yjnav === 'azlucky8') && indexChild === 'zm') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.gdklsf.zm)
        }
        if ((yjnav === 'gdklsf' || yjnav === 'cqxync' || yjnav === 'azlucky8') && indexChild === 'lm') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.gdklsf.lm)
        }
        //广西快乐十分
        if (yjnav === 'gxklsf' && indexChild === '15') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.gxklsf['15'])
        }
        if (yjnav === 'gxklsf' && indexChild === 'lm') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.gxklsf.lm)
        }
        if (yjnav === 'gxklsf' && indexChild === 'ball1') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.gxklsf.ball1)
        }
        if (yjnav === 'gxklsf' && indexChild === 'ball2') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.gxklsf.ball2)
        }
        if (yjnav === 'gxklsf' && indexChild === 'ball3') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.gxklsf.ball3)
        }
        if (yjnav === 'gxklsf' && indexChild === 'ball4') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.gxklsf.ball4)
        }
        if (yjnav === 'gxklsf' && indexChild === 'ball5') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.gxklsf.ball5)
        }
        //广东11选5
        if (yjnav === 'gd115' && indexChild === 'lm') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.gd115.lm)
        }
        if (yjnav === 'gd115' && indexChild === 'dh') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.gd115.dh)
        }
        if (yjnav === 'gd115' && indexChild === 'mp') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.gd115.mp)
        }
        if (yjnav === 'gd115' && indexChild === 'zx') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.gd115.zx)
        }
        // pc蛋蛋
        if (yjnav === 'pcegg' && indexChild === 'lm') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.pcegg.lm)
        }
        //广西快3
        if (yjnav === 'gxk3' && indexChild === 'all') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.gxk3.all)
        }
        if (yjnav === 'gxk3' && indexChild === 'yxx') {
          this.$store.commit('MEMBER_SET_LOTTERY', dttaLottery.gxk3.yxx)
        }
      },
      logout() {
        this.$store.dispatch('FedLogOut').then(() => {
          localStorage.removeItem('memberAlreadlogIn')
          sessionStorage.removeItem('memberAlreadlogIn')
          sessionStorage.removeItem('token')
          location.reload() // 为了重新实例化vue-router对象 避免bug
        })
      },
      // ,
      // goBack() {
      //   window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
      // }
    },
    destroyed() {
      clearInterval(interval)
    },
    watch: {
      async game(to, from) {
        if (to !== '0') {
          this.$store.commit('MAKE_LAST_RESULT__NULL')
          await this.$store.dispatch('MemberOrdersPages', {})
          this.selectedSubNav(this.memberGameSelected, this.memberPageSelected)
          // this.page = Object.keys(this.memberPages)[0]
          // 获取对应游戏的账号信息
          await this.$store.dispatch('MemberGameAccount', {})
          await this.$store.dispatch('MemberOrdersOdds', {
            game: this.memberGameSelected,
            page: this.memberPageSelected,
            _: parseInt(Date.now() / 1000),
          })
        }
        // 获取最新开奖结果
        // await this.$store.dispatch('MemberLastResult', {
        //   game: this.game,
        // })
        await this.getMemberLastResult();
        console.log(this.memberLastResult);
        // 获取最新注单
        await this.$store.dispatch('MemberLastOrder', {
          game: this.game,
        })
      },
      async page(to, from) {
        if (to !== '0' && to) {
          // await this.$store.dispatch('MemberOrdersLottery', {
          //   game: this.game,
          //   page: this.page,
          // })
          await this.$store.dispatch('MemberOrdersOdds', {
            game: this.memberGameSelected,
            page: this.page,
            _: parseInt(Date.now() / 1000),
          })
        }
      },
    },
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .nav-member {
    .header {
      /*background: linear-gradient(to bottom, #007ab2 0%, #239bd9 100%);*/
      /*color: #fff;*/
      height: 60px;
      .logo {
        padding-top: 12px;
        text-align: center;
        font-size: 30px;
        font-weight: 700;
      }
      .menu1 {
        height: 60px;
        .draw-number {
          font-weight: 700;
          .el-row {
            padding: 3px;
            text-align: center;
          }
        }
        .bb {
          display: inline-block;
          margin-top: 5px;
        }
      }
      .menu-link {
        .el-row {
          .el-col {
            margin-top: 3px;
            padding: 2px;
            font-weight: 700;
            cursor: pointer;
            text-align: center;
            border-right: 1px solid #fff;
            &:last-of-type {
              border: none;
            }
          }
          .el-col:hover {
            color: #ff0;
          }
        }
      }
      .logout {
        margin-top: 27px;
        height: 24px;
        line-height: 24px;
        width: 70px;
        cursor: pointer;
        border-radius: 4px;
      }
      .logout img{
        height: 15px;
        width: 15px;
        vertical-align: middle;
        margin-left: 10px;
        margin-right: 5px;
      }
    }
    .tabs {
      width: 100%;
      /*background-color: rgb(15, 63, 115);*/
      .item {
        cursor: pointer;
        height: 40px;
        color: #fff;
        font-weight: bold;
        &:hover {
          /*color: #ff0;*/
        }
        div {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .current {
        background-color: #f2f2f2;
        color: rgb(15, 63, 115);
        &:hover {
          color: rgb(15, 63, 115);
        }
      }
    }
    .subtabs {
      padding: 5px 0 5px 190px;
      .el-button{
        margin-left: 3px !important;
        background: linear-gradient(to bottom, #f1f1f1 0%, #e2e2e2 100%);
      }
    }

    .btn {
      padding: 6px 20px;
      &:hover {
        color: #fff;
        background: rgb(255, 126, 76) !important;
      }
    }

    .btn-active {
      border: rgb(255, 126, 76);
      color: #fff;
      background: rgb(255, 126, 76) !important;
    }
  }

  .itemsa:hover {
    /*background: #0f3f73;*/
  }

  #skinPanel {
    display: inline-block;
    vertical-align: top;
    width: 60px;
  }
  #skinPanel ul {
    padding: 0;
    margin: 0;
    list-style: none;
    margin-top: 3px;
  }
  #skinPanel ul li {
    float: left;
    margin: 0 1px;
    position: relative;
  }
  #skinPanel i {
    float: left;
    border: 1px solid rgba(255,255,255,0.3);
    height: 12px;
    width: 12px;
    position: relative;
  }
  #skinPanel i a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 12px;
  }
  #skinPanel ul li.active:before {
    content: '✓';
    position: absolute;
    color: #fff;
    font-size: 12px;
    top: -3px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    text-align: center;
  }
  .faletkGames{
    width: 300px;
    margin-left: -150px;
    background: #fff;
    position: absolute;
    height: auto;
    top: 71px;
    left:50%;
    display: block;
    z-index: 999;
    right: auto;
    bottom: auto;
  }
</style>
